<template>
	<view class="">
		<scroll-view scroll-x="true" class="scroll" scroll-with-animation="true">
			<view>
				<block v-for="(item, index) in tab" :key="index">
					<view class="list-cont" @click="tabs(index, item.nav)" :class="{ active: index === num }">
						<view>
							<text class="con-text-a">{{ item.name }}</text>
						</view>
						<view>
							<text class="con-text-b" :class="{ activeb: index === num }">{{ item.title }}</text>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
// 引入攻略列表
import { homeList } from '../../../common/cloundfun.js';
export default {
	name: 'content',
	props: {
		tab: Array
	},
	data() {
		return {
			num: 0
		};
	},
	methods: {
		tabs(index, nav) {
			this.num = index;
			console.log(nav);
			// 点击tab切换Loading状态显示
			// vuex传值
			let loading = true;
			
			// tab切换的时候把pageid设置为0
			let pageid=0
			
			// tab切换把没有数据提示的隐藏
			let nonedata=false
			// 初始更多
			let status="down"
			let loadMore=false
			// 以对象的方式传值
			let pullobj={
				loading:loading,
				nav:nav,
				pageid:pageid,
				status:status,
				loadMore:loadMore,
				nonedata:nonedata
			}
			this.$store.commit('navmuta', pullobj);
			
			// 请求数据库
			// 上拉加载值
			let listId=0
			homeList(nav,listId)
				.then(res => {
					console.log("点击 tab测试:",res);
					
					// tab切换没有数据的提示
					if(res.length===0){
						let nonedata=true
						this.$store.commit("nonemuta",nonedata)
					}else{
						let nonedata=false
						this.$store.commit("nonemuta",nonedata)
					}
					// vuex传值
					let listdata = res;
					// listact名字 到达action里
					// 第一步  原始的
					// this.$store.dispatch("listact",listdata)
					
					
					// 数据获取成功 loading取消
					loading = false;
					this.$store.commit('loadmut', loading);
					// 第一步  新方法 直接commit到mutations不经过actions

					this.$store.commit('listmut', listdata);
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style scoped>
.active {
	background-image: linear-gradient(to right, #ccffff 0%, #ffcc00 100%);
	border-top-right-radius: 50upx;
}
.activeb {
	color: #292c33 !important;
}
.scroll {
	white-space: nowrap;
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	background-color: #ffffff;
	padding: 20upx 0;
}
.con-text-a {
	color: #292c33;
	font-size: 30upx;
	font-weight: bold;
}
.con-text-b {
	color: #9ea0a5;
	font-size: 23upx;
}
.list-cont {
	width: 180upx;
	display: inline-block;
}
.list-cont > view {
	text-align: center;
}
</style>
